import {
  ProFormDateRangePicker,
  ProFormInstance,
  ProFormSelect,
  QueryFilter,
} from '@/components/Pro/';
import { batteryFaultControllerGetChartForBatteryProblem as getData } from '@/services/ess/diagnosisBatteryfault';
import type { DatePickerProps } from 'antd';
import { Spin } from 'antd';
import moment from 'moment';
import React, { useEffect, useRef, useState } from 'react';
import { useIntl } from 'umi';
import CommonChart from './CommonChart';

const Chart: React.FC<{
  history?: boolean;
}> = ({ history }) => {
  const formRef = useRef<ProFormInstance>();
  const [pageData, setPageData] = useState<API.ProblemChartResponse>({});
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    formRef?.current?.submit();
  }, [history]);

  const disabledDate: DatePickerProps['disabledDate'] = (current, { from }) => {
    const disabled = current && current > moment().subtract(1, 'days').endOf('day');

    if (from) {
      return disabled || Math.abs(current.diff(from, 'years')) >= 1;
    }

    return disabled;
  };
  const intl = useIntl();

  return (
    <div>
      <div>
        <QueryFilter
          formRef={formRef}
          onFinish={async (value) => {
            value.isSolve = history ? 3 : undefined;
            try {
              const res = await getData(value);
              setLoading(false);
              if (res.success) {
                const data = res?.data ?? {};
                (data?.seriesData || []).map((item, index) => {
                  item.stack = 'total';
                  item.label = {
                    show: true,
                    formatter: function (params) {
                      if (params?.value === '0') {
                        //为0时不显示
                        return '';
                      } else {
                        return params.value;
                      }
                    },
                  };
                  item.emphasis = {
                    focus: 'series',
                  };
                  if (index === 0) {
                    item.color = '#F54E4B';
                  }
                  if (index === 1) {
                    item.color = '#FF7A0C';
                  }
                  if (index === 2) {
                    item.color = '#FFD50C';
                  }
                  if (index === 3) {
                    item.color = '#67C23A';
                  }
                  if (index === 4) {
                    item.color = '#1A6CFE';
                  }
                  return item;
                });
                setPageData(data);
              }
            } catch (e) {
              setLoading(false);
            }
          }}
          onReset={() => {
            formRef?.current?.submit();
          }}
        >
          <ProFormSelect
            name="faultLevel"
            label={intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.faultLocation' })}
            initialValue="1"
            valueEnum={{
              1: {
                text: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.boxLocation' }),
              },
              2: {
                text: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.stackLocation' }),
              },
              3: {
                text: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.clusterLocation' }),
              },
              4: {
                text: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.BMULocation' }),
              },
              5: {
                text: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.cellNode' }),
              },
            }}
          />
          <ProFormDateRangePicker
            name="pay"
            label={intl.formatMessage({
              id: 'diagnosticPrediction.diagnosis.occurrenceCollectionTime',
            })}
            transform={(value) => {
              if (value) {
                return {
                  ssDateStart: value?.[0],
                  ssDateEnd: value?.[1],
                };
              }
            }}
            initialValue={[moment().subtract(31, 'days'), moment().subtract(1, 'days')]}
            fieldProps={{
              disabledDate: disabledDate,
              allowClear: false,
            }}
          />
        </QueryFilter>
      </div>
      <Spin spinning={loading}>
        <CommonChart pageData={pageData} />
      </Spin>
    </div>
  );
};
export default Chart;
